<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import { Message, type TableRowSelection } from '@arco-design/web-vue'
import { useGlobalStore } from '@/stores/global'
import { useRoute } from 'vue-router'
import router from '@/router'
import { generatorColumnsModify, generatorFindById } from '@/api/system/generator'

// 挂载时加载数据
onMounted(() => {
  const route = useRoute()
  const id = route.query.id
  if (!id) {
    Message.error('生成表ID不能为空！')
    router.back()
  }
  generatorFindById(Number(id)).then(resp => {
    const data = resp.data
    //设置生成表的ID
    fieldsForm.id = data.id
    //设置生成表的字段信息
    fieldsForm.forms = data.generatorColumns.map((val: any, index: number) => {
      val['key'] = index
      return val
    })
  })

  document.title = `Rocc管理系统 代码生成-${route.query.name}`

})

//全局状态
const global = useGlobalStore()

const submitBtn = ref()
const fieldsForm = reactive({
  id: null,
  forms: [] as any[],
  rules: {
    columnCommentName: [{ required: true, message: '字段名描述不能为空' }],
    columnName: [{ required: true, message: '字段名不能为空' }],
    columnType: [{ required: true, message: '字段类型不能未空' }],
    searchModel: [{ required: true, message: '搜索条件不能为空' }],
    editComponent: [{ required: true, message: '编辑组件不能为空' }],
    gormType: [{ required: true, message: 'gorm类型不能为空' }]
  },
  selectKeys: [] as any[],
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true
  } as TableRowSelection,
  //提交表单
  submit: ({ errors, values }: any) => {
    //出错返回
    if (errors) return
    generatorColumnsModify(Number(fieldsForm.id), fieldsForm.forms).then(() => {
      router.back()
    })
  },
  handleSubmit: () => {
    submitBtn.value.click()
  },

  addColumn: () => {
    //防止空指针异常
    if (fieldsForm.forms === null) {
      fieldsForm.forms = []
    }
    fieldsForm.forms.push({
      columnCommentName: null,
      columnName: null,
      columnType: null,
      edit: null,
      editComponent: null,
      generatorTableId: null,
      gormType: null,
      id: null,
      required: null,
      search: null,
      searchModel: null,
      show: null,
      dataSourceType: null,
      dataKey: null,
      key: fieldsForm.forms.length
    })
  },
  removeColumn: () => {
    //删除选中的行
    const map = new Map()
    fieldsForm.selectKeys.forEach(val => {
      map.set(val, val)
    })
    fieldsForm.forms = fieldsForm.forms.filter(val => {
      return map.get(val.key) == undefined
    })
  }
})

</script>

<template>
  <div class="mb-2">
    <div class="flex justify-between">
      <a-space>
        <a-button type="primary" @click="fieldsForm.addColumn">
          <template #icon>
            <icon-plus />
          </template>
          添加
        </a-button>

        <a-button type="primary" status="danger" @click="fieldsForm.removeColumn">
          <template #icon>
            <icon-delete />
          </template>
          删除
        </a-button>

      </a-space>
      <a-button type="primary" status="success" @click="fieldsForm.handleSubmit">
        <template #icon>
          <icon-check />
        </template>
        完成
      </a-button>
    </div>
  </div>
  <a-form auto-label-width :model="fieldsForm" @submit="fieldsForm.submit">
    <button type="submit" ref="submitBtn" class="hidden">提交表单</button>
    <a-table :pagination="false" :scroll="{x:'120%',y:'100%'}" :data="fieldsForm.forms"
             v-model:selected-keys="fieldsForm.selectKeys" :row-selection="fieldsForm.rowSelection">
      <template #columns>
        <a-table-column title="字段描述" fixed="left">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].columnCommentName`" validate-trigger="blur"
                         :rules="fieldsForm.rules.columnCommentName"
                         hide-asterisk>
              <a-input v-model="fieldsForm.forms[rowIndex].columnCommentName"></a-input>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="字段名">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].columnName`" validate-trigger="blur"
                         :rules="fieldsForm.rules.columnName" hide-asterisk>
              <a-input v-model="fieldsForm.forms[rowIndex].columnName"></a-input>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="字段类型">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].columnType`" validate-trigger="blur"
                         :rules="fieldsForm.rules.columnType" hide-asterisk>
              <a-select allow-create allow-search allow-clear v-model="fieldsForm.forms[rowIndex].columnType">
                <a-option v-for="(v,k) of global.global.caches.commons.generatorFieldType" :label="k" :value="v"
                          :key="k" />
              </a-select>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="gorm类型">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].gormType`" validate-trigger="blur"
                         :rules="fieldsForm.rules.gormType" hide-asterisk>
              <a-select allow-create allow-search allow-clear v-model="fieldsForm.forms[rowIndex].gormType">
                <a-option v-for="(v,k) of global.global.caches.commons.generatorSqlType" :label="k" :value="v"
                          :key="k" />
              </a-select>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="必填" width="80">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].gormType`" validate-trigger="blur" hide-asterisk>
              <a-checkbox v-model="fieldsForm.forms[rowIndex].required"></a-checkbox>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="搜索" width="80">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].search`" validate-trigger="blur" hide-asterisk>
              <a-checkbox v-model="fieldsForm.forms[rowIndex].search"></a-checkbox>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="显示" width="80">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].gormType`" validate-trigger="blur" hide-asterisk>
              <a-checkbox v-model="fieldsForm.forms[rowIndex].show"></a-checkbox>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="编辑" width="80">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].gormType`" validate-trigger="blur" hide-asterisk>
              <a-checkbox v-model="fieldsForm.forms[rowIndex].edit"></a-checkbox>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="搜索条件">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].searchModel`" validate-trigger="blur"
                         :rules="fieldsForm.forms[rowIndex].search ? fieldsForm.rules.searchModel: null"
                         hide-asterisk>
              <a-select allow-create allow-search allow-clear v-model="fieldsForm.forms[rowIndex].searchModel">
                <a-option v-for="(v,k) of global.global.caches.commons.generatorSearchModel" :label="k"
                          :value="v"
                          :key="k" />
              </a-select>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="组件">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].editComponent`" validate-trigger="blur"
                         :rules="fieldsForm.forms[rowIndex].edit ? fieldsForm.rules.editComponent : null"
                         hide-asterisk>
              <a-select allow-create allow-search allow-clear v-model.number="fieldsForm.forms[rowIndex].editComponent">
                <a-option v-for="(v,k) of global.global.caches.commons.generatorEditComponent" :label="v"
                          :value="Number(k)"
                          :key="k" />
              </a-select>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="数据来源">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].dataSourceType`" validate-trigger="blur" hide-asterisk>
              <a-select allow-create allow-search allow-clear v-model="fieldsForm.forms[rowIndex].dataSourceType">
                <a-option v-for="(v,k) in global.global.caches.commons.generatorDataSource" :label="v"
                          :value="k"
                          :key="k" />
              </a-select>
            </a-form-item>
          </template>
        </a-table-column>
        <a-table-column title="数据列表">
          <template #cell="{rowIndex}">
            <a-form-item :field="`forms[${rowIndex}].dataKey`" validate-trigger="blur" hide-asterisk>
              <a-select allow-create allow-search allow-clear v-model="fieldsForm.forms[rowIndex].dataKey">
                <template v-if="fieldsForm.forms[rowIndex].dataSourceType == 'commons'">
                  <a-option v-for="(v,k) of global.global.caches.database.generatorDataSourceCache" :label="v"
                            :value="k"
                            :key="v" />
                </template>
                <template v-else-if="fieldsForm.forms[rowIndex].dataSourceType == 'database'">
                  <a-option v-for="(v,k) of global.global.caches.database.generatorDataSourceDatabase" :label="v"
                            :value="k"
                            :key="v" />
                </template>
              </a-select>
            </a-form-item>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-form>
</template>

<style scoped>

</style>
